<template>
  <MCard>
    <template #header>
      <div class="title_box">
        <img :src="networkAccessManagementBg2" alt="" />
        <span class="text-14px">{{ title }}</span>
      </div>
    </template>
    <div class="flex justify-between p-l-15px p-t-10px p-r-10px">
      <div class="text-14px">{{ subTitle }}</div>
      <div>
        <MSelect
          v-if="component === 'select'"
          v-bind="optionsConfig"
          v-model="optionsConfig.baseband_id"
        />
        <el-input-number
          v-if="component === 'inputNumber'"
          controls-position="right"
          style="width: 200px"
          :precision="1"
          v-model="inputNumber"
        />
        <div class="flex justify-end m-t-10px gap-10px">
          <div
            v-for="btn in btns"
            :key="btn.value"
            v-globalLoading="{
              handler: ($event: MouseEvent) => btn.click(btn, $event),
              text: btn.loadingText || '配置中',
            }"
            :class="btn.class"
            :style="{
              color:btn.color
            }"
          >
            <el-icon>
              <component :is="btn.component"></component>
            </el-icon>
            <span class="text-14px">{{ btn.label }}</span>
          </div>
        </div>
      </div>
    </div>
  </MCard>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "TemplateBox",
});
</script>
<script setup lang="ts">
import networkAccessManagementBg2 from "@/assets/imgs/networkAccessManagement-bg2.png";
interface ButtonConfig {
  value: string;
  label: string;
  component: string;
  type?: string;
  color?: string;
  loadingText?: string;
  click: (btn: ButtonConfig, event: MouseEvent) => void;
}
const props = defineProps<{
  title: string;
  optionsConfig?: any;
  subTitle: string;
  btns: any;
  component: string;
}>();
const inputNumber = defineModel<number>("inputNumber");
</script>

<style lang="scss" scoped>
@import "@/styles/input.scss";

.title_box {
  display: flex;
  gap: 5px;
  align-items: center;
  img {
    width: 18px;
    height: 18px;
    display: block;
    vertical-align: middle;
  }
  span {
    line-height: 18px;
    display: inline-block;
    vertical-align: middle;
  }
}
</style>
